<style lang="scss" rel="stylesheet/scss">
    .j-news-content {
        .con-tip {
            text-align: center;
            p.one {
                color: #222;
                font-weight: 700;
                margin-bottom: 0.5rem;
                font-size: 15px;
            }
            span.two {
                color: #e64340;
                border: 1px solid #e64340;
                border-radius: 0.2rem;
                line-height: 1.3rem;
                padding: 0 0.6rem;
            }
        }
        .vjs-big-play-button {
            top: 8rem !important;
        }
        .img-txt-video-div {
            padding: 0.5rem;
            color: #444;
            .div-text {
                p {
                    // text-indent:2em;
                    word-break: break-all;
                    line-height: 1.5rem;
                }
            }
            .div-img {
                padding: 0.4rem 0;
                .img{
                    &.img-one{
                        img{
                            width: 100%;
                        }
                    }
                    &.img-two{
                        img{
                            width: 49%;
                            height: 10rem;
                            margin-right: 1%
                        }
                    }
                    &.img-over-three{
                        img{
                            width: 32%;
                            height: 7rem;
                            margin-right: 2%;
                        }
                        & img:nth-child(3n) {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
        .to-href {
            display: flex;
            padding: 0.7rem 1rem;
            border-top: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            .t-la {
                color: #333;
                padding: 0.5rem;
                p {
                    margin-top: 0.1rem;
                }
            }
            .line {
                background: #eee;
                width: 1px;
                height: 2rem;
                margin-top: 0.7rem;
                margin-right: 0.8rem;
            }
            img{
                width: 3rem;
                height: 3rem;
                flex:0 0 3rem;
            }
            &>p {
                color: #e64340;
                margin-left:0.5rem;
                line-height: 2rem;
            }
        }
        .ask-our {
            padding: 0.5rem 1.5rem;
            text-align: center;
            color: #333;
            span.read {
                color: #0093f9;
                text-decoration: underline
            }
            .two-icon {
                display: flex;
                margin-top: 1.5rem;
                .iconfont {
                    color: #333;
                    flex:1;
                    text-align: center;
                }
            }
        }
    }
</style>
<template>
    <div class="j-news-content">
        <j-info-user :userinfo="content"></j-info-user>
        <div class="con-tip">
            <p class="font-normal one">点击【首页】，收藏平台，一键发布，长期有效</p>
            <span class="font-small two" v-if="content.share_span">{{content.share_span}}</span>
        </div>
        <div class="img-txt-video-div ">
            <div id="video" v-show="content.video_content"></div>
            <div class="font-normal div-text">
                <p v-html="content.content_prot"></p>
            </div>
            <div class="div-img" v-if="content.adver_img && content.adver_img.length">
                <div class="img img-one" v-if="imgs.length > 0 && imgs.length < 2">
                    <img class="previewer-demo-img" v-for="(item, index) in imgs" v-bind:key="index" :src="item.src" width="100" @click="imgshow(index)">
                </div>
                <div class="img img-two" v-else-if="imgs.length > 1 && imgs.length < 3">
                    <img class="previewer-demo-img" v-for="(item, index) in imgs" v-bind:key="index" :src="item.src" width="100" @click="imgshow(index)">
                </div>
                <div class="img img-over-three" v-else-if="imgs.length > 2">
                    <img class="previewer-demo-img" v-for="(item, index) in imgs" v-bind:key="index" :src="item.src" width="100" @click="imgshow(index)">
                </div>
            </div>
        </div>
        <div class="to-href" v-if="content.link_content && content.link_text">
            <div class="font-big-normal t-la">
                <p>信息</p>
                <p>链接</p>
            </div>
            <div class="line"></div>
            <img :src="content.link_img" alt="">
            <a :href="content.link_content | fillhttp" class="font-normal" style="margin-left: 10px;">{{content.link_text || '点击链接、进入详情、查看更多'}}</a>
        </div>
        <div class="ask-our">
            <p class="iconfont icon-question font-normal"> 为保证您合法权利，<span class="read" @click="readme">请点击阅读</span></p>
            <div class="two-icon font-big-normal">
                <p class="iconfont icon-chakantiezigengduojubao" @click="jubao"> 举报</p>
                <p class="iconfont icon-pinglun" @click="toDownloedApp"> 聊聊</p>
            </div>
        </div>
        <van-popup v-model="jbao.popShow" position="bottom">
            <van-picker show-toolbar :columns="jbao.popList" @cancel="onCanceljubao" @confirm="selectjubao" />
        </van-popup>
    </div>
</template>

<script>
    import { ImagePreview } from 'vant';
    import jInfoUser from "components/Header/InfoUser"
    export default {
        components: {
            jInfoUser
        },
        props:['content'],
        computed: {
            imgs() {
                if(!this.content.adver_img) return
                let arr = []
                for(let item of this.content.adver_img) {
                    let img = {}
                    img.msrc = item
                    img.src = item
                    arr.push(img)
                }
                return arr
            }
        },
        data () {
            return {
                jbao: {
                    popShow: false,
                    popList: ['虚假信息', '垃圾广告', '侵权抄袭', '涉黄涉毒', '政治敏感', '其他']
                },
            }
        },
        beforeCreate () {
            
        },
        created () {
        },
        watch: {
            'content'(val) {
                // 添加 ckplayer 解决android端挡住别的层级高的 在index.html文件中引入了
                var flashvars={
                    p:0,     //是否自动播放  可以为1或者0  不为1时播放器加载完成后均为暂停状态
                    e:1,
                    i:val.video_thumb,
                }
                var video=[val.video_content];
                var support=['all'];
                var kuan = document.body.clientWidth*0.94;
                // console.log('video_content'+video)
                CKobject.embedHTML5('video','ckplayer_a1',kuan,300,video,flashvars,support);
            }
        },
        mounted() {
            
        },
        methods: {
            imgshow (index) {
                ImagePreview({
                    images: this.content.adver_img,
                    startPosition: index,
                })
            },
            readme() {
                xmview.showAlert('温馨提示','亿家世宝仅向注册用户和非注册用户提供平台服务，亿家世宝平台上的信息系用户自行发布，由于海量信息的存在及现有技术原因，亿家世宝无法杜绝可能存在的风险和瑕疵。您应谨慎判断确定相关信息的真实性、合法性和有效性，并注意保留相应的证据以利于维权。如可能，尽量采用网站建议的交易方式进行。<span style="color:#f00">亿家世宝不对信息的真实性，准确性，有效性和安全性负责。</span>')
            },
            jubao() {
                this.jbao.popShow = true
            },
            toDownloedApp() {
                // xmview.showAlert('','下载亿家世宝APP，在里面随意畅聊哦~还能互相加为好友，方便随时沟通','点击下载',() => {
                //     window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yijiashibao.app';
                //     // xmview.showToast('我去那边下载啦~~');
                // })
                this.$dialog.confirm({
                    message: '下载亿家世宝APP，在里面随意畅聊哦~还能互相加为好友，方便随时沟通',
                    confirmButtonText: '点击下载'
                }).then(() => {
                    // on confirm
                     window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yijiashibao.app';
                }).catch(() => {
                    // on cancel
                });
            },
            selectjubao(value, index) {
                let infoobj = JSON.parse(sessionStorage.getItem('infoObj'))
                xmview.getKey('info-report', infoobj.unionid).then(key => {
                    let params = {
                        info_id: infoobj.info_id,
                        info_type: infoobj.info_type,
                        content: value
                    }
                    this.$post(`${xmconfig.API_YI}/v1/info-report?unionid=${infoobj.unionid}&key=${key}`,params).then(res => {
                        if(res.code === 200) {
                            this.jbao.popShow = false
                            xmview.showToast(res.msg)
                        }
                    })
                })
                
            },
            onCanceljubao() {
                this.jbao.popShow = false
            },
        },
        directives: {
            // TransferDom
        }
    }
</script>

